<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				overflow: hidden;
			}
			li{
				width: 60px;
				height: 30px;
				text-align: center;
				float: left;
				list-style: none;
			}
		</style>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/JsExcelXml.js"></script>
				<script>
		//导出数据到excel文件

		function exportExcel()
		{
			var columnsInfo = [];//列设置
			var data = [];//数据
			$("#grid").find("li").each(function(i) {
                var text = $(this).text();
				var column = { field: text, title: text};
                columnsInfo.push(column);
 
            });
			$("#app").find("ul").each(function(i) {
				var dataObj = new Object();
				$(this).find("li").each(function(j) {
					var text = $(this).text();
					var column = columnsInfo[j];
					dataObj[column.field] = text;	
				});
				data.push(dataObj);
            });
			//导出excel设置

			var opts = {
				HeadInfo: [columnsInfo],
				RowInfo: data,
				FooterInfo: null,
				MergeCells: null,
				CellStyles: null,
				MainTitle: { Displayname: '', Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 16, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				SecondTitle: { Displayname: '', Alignment: 'Left', BgColor: '#FFFFFF', FontSize: 14, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				HeadStyle: { Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				DataStyle: { Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 10, FontColor: "#000000", IsBold: false, IsItalic: true, IsUnderLine: false },
				FootStyle: { Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				RowStart: 1,
				ColumStart: 1,
				SheetName: 'sheet'
			}
			var excelxml = JSXmlExcel.BulidXml(opts);//导出的excel对应的xml字符串

			
			if ($.browser.msie) { //如果是IE浏览器，ie方式的导出

				var xlsWin = null;
				if (!!document.all("glbHideFrm")) {
					xlsWin = glbHideFrm;
				} else {
					var width = 1; var height = 1;
					var openPara = "left=" + (window.screen.width / 2 + width / 2) + ",top=" + (window.screen.height + height / 2) + ",scrollbars=no,width=" + width + ",height=" + height;
					xlsWin = window.open("", "_blank", openPara);
				}
				xlsWin.document.write(excelxml);
				xlsWin.document.close();
				xlsWin.document.execCommand('Saveas', true, "导出数据.xls");
				xlsWin.close();
			}else{ //其他浏览器的导出

				var urlObject = window.URL || window.webkitURL || window;
				var export_blob = new Blob([excelxml]);
				var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
				save_link.href = urlObject.createObjectURL(export_blob);
				save_link.download = "导出数据.xls";
				var ev = document.createEvent("MouseEvents");
				ev.initMouseEvent(
					"click", true, false, window, 0, 0, 0, 0, 0
					, false, false, false, false, 0, null
					);
				save_link.dispatchEvent(ev);
			}
			
		}
		
		</script>
	</head>
	<body>
		<ul id="grid">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<div id="app">
			<ul>
				<li>11</li>
				<li>22</li>
				<li>33</li>
				<li>44</li>
				<li>55</li>
			</ul>
			<ul>
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>555</li>
			</ul>
			<ul>
				<li>1111</li>
				<li>2222</li>
				<li>3333</li>
				<li>4444</li>
				<li>5555</li>
			</ul>
			<ul>
				<li>语文</li>
				<li>数学</li>
				<li>英语</li>
				<li>生物</li>
				<li>化学</li>
			</ul>
		</div>
		<button onclick="exportExcel();return false;">导出数据为excel文件</button><br><br>
	</body>
</html>
